<template>
    <Dashboard :menu="menu">
        <el-row>
            <el-button type="primary" @click="addPlugin">新增</el-button>
            <el-table :data="pluginData" stripe style="margin-top:24px">
                <el-table-column prop="name" label="插件名称" header-align="center" align="center">
                </el-table-column>
                <el-table-column prop="appid" label="appid" header-align="center" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center" header-align="center">
                    <template slot-scope="scope">
                        <el-tooltip content="删除">
                            <i class="iconfont icon-shanchu2" @click="deletePlugin(scope.row)" style="font-size:26px;cursor:pointer;color:rgb(158, 167, 179)"></i>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <el-row>
                <el-pagination background layout="total,prev,pager,next" :total="pagination.rowCount" :page-size="pagination.pageSize" @current-change="changePage" style="float:right;margin:24px 0"></el-pagination>
            </el-row>
            <el-dialog title="小程序插件" :visible.sync="showModal" width='500px'>
                <el-form label-width="60px">
                    <el-form-item label='名称' required>
                        <el-input v-model='form.name' placeholder="请输入小程序名称"></el-input>
                    </el-form-item>
                    <el-form-item label='appid' required>
                        <el-input v-model='form.appid' placeholder="请输入小程序appid" :maxlength='18'>
                        </el-input>
                    </el-form-item>
                </el-form>
                <p slot="footer">
                    <el-button type='primary' @click='ok'>确定</el-button>
                </p>
            </el-dialog>
        </el-row>
    </Dashboard>
</template>
<script>
import Dashboard from "./../../../web/components/Dashboard.vue";
export default {
    layout: "decorate",
    components: {
        Dashboard
    },
    data() {
        return {
            menu: [
                {
                    name: "小程序插件",
                    icon: "icon-xiaochengxuchajian",
                    sub: [
                        {
                            name: "插件列表",
                            url: "/wxaplugins"
                        }
                    ]
                }
            ],
            pluginData: [],
            pagination: {},
            showModal: false,
            form: {
                name: "",
                appid: ""
            }
        };
    },
    async asyncData({ app }) {
        let data = {};
        const res = await app.$axios.$get(
            "/api/wxaplugins/home/wxaplugins/index"
        );
        if (res && res.errmsg === "ok") {
            data.pluginData = res.data.data;
            data.pagination = res.data.pagination;
        }
        return data;
    },
    methods: {
        async getData() {
            const res = await this.$axios.$get(
                `/api/wxaplugins/home/wxaplugins/index?page=${
                    this.pagination.page
                }`
            );
            if (res && res.errmsg === "ok") {
                this.pluginData = res.data.data;
                this.pagination = res.data.pagination;
            }
        },
        changePage(page) {
            this.pagination.page = page;
            this.getData();
        },
        addPlugin() {
            this.showModal = true;
            this.form.name = "";
            this.form.appid = "";
        },
        async deletePlugin(row) {
            const res = await this.$axios.$get(
                `/api/wxaplugins/home/wxaplugins/del?id=${row.id}`
            );
            if (res && res.errmsg === "ok") {
                this.$message.success("删除成功");
                this.getData();
            }
        },
        async ok() {
            if (!this.form.name) {
                this.$message.warning("请输入名称");
                return;
            }
            this.form.appid = this.form.appid.replace(/^\s+|\s+$/g, "");
            if (!this.form.appid) {
                this.$message.warning("请填写小程序appid");
                return;
            }
            if (this.form.appid.length != 18) {
                this.$message.warning("请正确填写小程序appid");
                return;
            }

            let data = {};
            data.name = this.form.name;
            data.appid = this.form.appid;

            const res = await this.$axios.$post(
                "/api/wxaplugins/home/wxaplugins/add",
                data
            );
            if (res && res.errmsg === "ok") {
                this.$message.success("保存成功");
                this.showModal = false;
                this.getData();
            }
        }
    }
};
</script>